<!--
 * @Author: ChenCaoYang
 * @Date: 2021-05-26 20:11:18
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-10 13:24:13
-->
<template>
  <div>
    <!-- 轮播图 -->
    <div class="block">
      <Banner></Banner>
    </div>
    <div class="container">
      <!-- meun -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#CF975A"
        @select="handleSelect"
      >
        <el-menu-item index="1">个人中心</el-menu-item>
        <el-menu-item index="2">购物车</el-menu-item>
        <el-menu-item index="3">收藏商品</el-menu-item>
        <el-menu-item index="4">点赞收藏</el-menu-item>
      </el-menu>
      <!-- 个人中心 -->
      <UserCenter v-if="activeIndex == 1" />
      <!-- 购物车 -->
      <Cords v-if="activeIndex == 2" />
      <!-- 收藏商品 -->
      <CollectionOfGoods v-if="activeIndex == 3" />
      <!-- 点赞收藏 -->
      <LikeCollection v-if="activeIndex == 4" />
    </div>
  </div>
</template>

<script>
import Banner from "@/components/banner/index.vue";
import UserCenter from "./components/UserCenter/index";
import CollectionOfGoods from "./components/CollectionOfGoods/index";
import LikeCollection from "./components/LikeCollection/index";
import Cords from "./components/Cords/index";
export default {
  name: "User",
  data() {
    return {
      carousel: [], // 轮播图数据
      activeIndex: "1", //当前选中的menu
    };
  },
  mounted() {
    let { isShoppingCart } = this.$route.query;
    if (isShoppingCart) {
      this.activeIndex = "2";
    }
  },
  components: {
    Banner,
    UserCenter,
    CollectionOfGoods,
    LikeCollection,
    Cords,
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>
